<template>
    <div class="page-container page-customerManage">
        <div class="company-manager">
            <div class="operations">

                <div class="search-user">
                    <el-input v-model="searchKey" class="search-input" placeholder="企业名称" style="width: 200px;"></el-input>
                    <div class="search-btn" @click="getCompanyVideo">查询</div>
                </div>
            </div>
            <el-table
                :data="companyList"
                border
                tooltip-effect="dark"
                style="width: 100%;"
                >
                <el-table-column
                label="编号"
                align="center"
                width="60">
                    <template slot-scope="scope">
                        <div>{{ scope.row.companyId }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="companyName"
                    align="center"
                    label="企业名称"
                   >
                </el-table-column>

                <el-table-column   align="center"  label="短视频开关"  >
                    <template slot-scope="scope">
                        <el-switch @change="switchVideoClick(scope.row)"
                                   v-model="scope.row.stateSwitch"
                                   active-text="打开"
                                   inactive-text="关闭">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="videoSize"
                        align="center"
                        label="可上传视频数量"
                >
                </el-table-column>
                <el-table-column   align="center"  label="操作"  >
                    <template slot-scope="scope">
                            <el-button class="el-button checkCard el-button--text el-button--medium"  style="color: rgb(81, 205, 203);" @click="editVideoSize(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="page">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="pageNum"
                :page-sizes="[10]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog title="编辑"  :modal-append-to-body="false" width="20%" :append-to-body="true" :modal="false" :rules="rules" ref="form" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="视频限制数量"  prop="videoSize" >
                    <el-input v-model="form.videoSize" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button  class="btncss" @click="updateSize" >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {  getCompanyVideoList,switchVideoFun,updateSize } from '@/api/api.js';
import { str2date, getCookie } from '@/utils/util.js';
import { serverUrl } from "@/utils/server.js";
const Qs = require('qs');
export default {
    data() {
        return {
            total: 0,
            pageNum: 1,
            dialogFormVisible:false,
            switchVideo: false,
            searchKey:'',
            companyList:[],
            rules:{
                videoSize: [
                    { required: true, message: '请输入视频限制数量', trigger: 'blur' },
                    { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
                ],
            },
            setSermissionsform: {
                companyName: '',
            },
            form:{
                videoSize:'',
                companyId:''
            }
        };
    },
    created() {
        this.getCompanyVideo();
    },
    mounted() {

    },
    methods: {
        editVideoSize(row){
            this.form = row;
            this.dialogFormVisible = true;
        },
        updateSize(){
            let params = this.form;
            updateSize(params).then(res => {
                if (res.code === 200){
                    this.$message({
                        message: '操作成功',
                        type: 'sussess'
                    });
                    this.dialogFormVisible = false;
                    setTimeout(() => {
                        this.getCompanyList();
                    }, 200)
                }
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: 'warning'
                });
            })
        },

        getCompanyVideo () {
            let params = {
                pageNum: this.pageNum,
                companyName: this.searchKey
            }
            getCompanyVideoList(params).then(res => {
                if (res.code == 200) {
                    this.total = res.data.pageInfo.total;
                    this.companyList = res.data.pageInfo.list;
                } else {
                    this.companyList = [];
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.companyList = [];
            })
        },
        switchVideoClick(row){
            let params = {
                switchVideo: row.stateSwitch,
                companyId:row.companyId
            }
            switchVideoFun(params).then(res => {
                if (res.code === 200){
                    this.$message({
                        message: '操作成功',
                        type: 'sussess'
                    });
                    setTimeout(() => {
                        this.getCompanyList();
                    }, 200)
                }
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: 'warning'
                });
            })
        },
        handleCurrentChange () {
            this.getCompanyVideo()
        },
    }
}
</script>
<style lang="scss">
.page-customerManage{
    background: #fff;
    min-height: calc(100vh - 150px);
    position: relative;
    .refresh-btn{
        z-index: 999;
        position: absolute;
        top: 20px;
        right: 20px;
        color: #fff;
        height: 32px;
        width: 68px;
        cursor: pointer;
        color: #fff;
        border-radius: 4px;
        text-align: center;
        line-height: 32px;
        background: #51CDCB;
        position: absolute;
    }
    .el-tabs__item{
        height: 74px;
        line-height: 74px;
    }
    .page{
        padding: 10px 0;
        text-align: center;
    }
    .company-manager{
        padding: 0 20px;
        .operations{
            display: flex;
            justify-content: space-between;
            height: 60px;
            align-items: center;
            .operation-btns{
                display: flex;
                div{
                    border-radius: 4px;
                    // background: #B9EBEA;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 30px;
                    height: 30px;
                    color: #fff;
                    padding: 0 20px;
                    margin-right: 10px;
                    cursor: pointer;
                }
                .disabled{
                    background: #B9EBEA;
                }
            }
            .search-user{
                display: flex;
                .search-input{
                    height: 30px;
                    margin-right: 10px;
                    .el-input__inner{
                        height: 30px;
                    }
                }
                .search-btn{
                    border-radius: 4px;
                    // background: #B9EBEA;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 30px;
                    height: 30px;
                    color: #fff;
                    padding: 0 20px;
                    cursor: pointer;
                }
                .disabled{
                    background: #B9EBEA;
                }
            }
        }
    }
    .customer-manage-dialog{
        .el-dialog{
            width: 450px;
            .el-dialog__header{
                text-align: center;
            }
            .el-form-item{
                margin-bottom: 10px;
            }
            .w240{
                width: 240px;
            }
        }
    }
}
</style>
